<%@page import="com.udistrisisbici.vo.AdministradorVO"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <%

            AdministradorVO admin = (AdministradorVO) session.getAttribute("Administrador");

            if (null == admin) {
                
                response.sendRedirect("../index.html");
                
            }

        %>
        <title>Admin1</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
        <meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/>
        <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" href="../css/menuStyle.css" type="text/css" media="screen"/>
        <style>
            body{
                background:#333 url(../img/bg.jpg) repeat top left;
                font-family:Arial;
            }
            span.reference{
                position:fixed;
                left:10px;
                bottom:10px;
                font-size:12px;
            }
            span.reference a{
                color:#aaa;
                text-transform:uppercase;
                text-decoration:none;
                text-shadow:1px 1px 1px #000;
                margin-right:30px;
            }
            span.reference a:hover{
                color:#ddd;
            }
            ul.sdt_menu{
                margin: auto;
            }
            h1.title{
                text-indent:-9000px;
                background:transparent url(../img/title.png) no-repeat top left;
                width:633px;
                height:69px;
                width: 70%;
                margin: 0 auto;
            }
            .img{
                width: 50%;
                margin: 0 auto;
                padding-top: 2%;
                padding-bottom: 2%;
            }
        </style>
    </head>

    <body>
        <div class="content">
            <div class="img"><img src="../img/title.png" alt=""/></div>
            <!--<h1 class="title">Slide Down Box Menu with jQuery and CSS3</h1>-->
            <ul id="sdt_menu" class="sdt_menu">
                <li>
                    <a href="#">
                        <img src="../img/2.png" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">usuario ud</span>
                            <span class="sdt_descr">acciones usuario</span>
                        </span>
                    </a>
                    <div class="sdt_box">
                        <a href="ingresarUsuario.jsp">crear nuevo</a>
                        <a href="buscarUsu.jsp">consultar</a>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/3.png" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">bicicletas</span>
                            <span class="sdt_descr">acciones de bicicletas</span>
                        </span>
                    </a>
                    <div class="sdt_box">
                        <a href="crearBici.jsp">crear nueva</a>
                        <a href="buscarBici.jsp">consultar</a>
                    </div>
                </li>
                <li>
                    <a href="ingresarBici.jsp">
                        <img src="../img/entrada.png" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">entrada</span>
                            <span class="sdt_descr">registrar entrada</span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/salida.png" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">salida</span>
                            <span class="sdt_descr">registrar salida</span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/cuenta.png" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">mi cuenta</span>
                            <span class="sdt_descr">datos de administrador</span>
                        </span>
                    </a>
                    <div class="sdt_box">
                        <a href="#">actualizar datos</a>
                        <a href="#">cambiar contraseña</a>
                        <a href="../Salir">salir</a>
                    </div>
                </li>
            </ul>
        </div>

        <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
                /**
                 * for each menu element, on mouseenter, 
                 * we enlarge the image, and show both sdt_active span and 
                 * sdt_wrap span. If the element has a sub menu (sdt_box),
                 * then we slide it - if the element is the last one in the menu
                 * we slide it to the left, otherwise to the right
                 */
                $('#sdt_menu > li').bind('mouseenter', function() {
                    var $elem = $(this);
                    $elem.find('img')
                            .stop(true)
                            .animate({
                                'width': '170px',
                                'height': '170px',
                                'left': '0px'
                            }, 400, 'easeOutBack')
                            .andSelf()
                            .find('.sdt_wrap')
                            .stop(true)
                            .animate({'top': '140px'}, 500, 'easeOutBack')
                            .andSelf()
                            .find('.sdt_active')
                            .stop(true)
                            .animate({'height': '170px'}, 300, function() {
                                var $sub_menu = $elem.find('.sdt_box');
                                if ($sub_menu.length) {
                                    var left = '170px';
                                    if ($elem.parent().children().length == $elem.index() + 1)
                                        left = '-170px';
                                    $sub_menu.show().animate({'left': left}, 200);
                                }
                            });
                }).bind('mouseleave', function() {
                    var $elem = $(this);
                    var $sub_menu = $elem.find('.sdt_box');
                    if ($sub_menu.length)
                        $sub_menu.hide().css('left', '0px');

                    $elem.find('.sdt_active')
                            .stop(true)
                            .animate({'height': '0px'}, 300)
                            .andSelf().find('img')
                            .stop(true)
                            .animate({
                                'width': '0px',
                                'height': '0px',
                                'left': '85px'}, 400)
                            .andSelf()
                            .find('.sdt_wrap')
                            .stop(true)
                            .animate({'top': '25px'}, 500);
                });
            });
        </script>
    </body>
</html>